<style>
.k-grid td {
    white-space: nowrap;
    overflow: hidden;
}
 
.k-grid table {
    table-layout: fixed;
}

</style>
<script type="text/javascript" src="/js/app/monitor.js"></script>
<script>
    var dataSourceAjax = null;
    var grid = null;
    var tabs = null;
    var planKendo = null;
    var windowNote = null;
    
    $(document).ready(function() {
        tabs = $("#tabstrip").kendoTabStrip();

        $("#note").kendoEditor();
        planKendo = $("#note").data("kendoEditor");
        
        $("#alexaRank").kendoNumericTextBox({
            format: "#",
            min : 0
        });
        
        grid = new Monitor.Grid("grid");   
        
        windowNote = $("#windowNote");
        if (!windowNote.data("kendoWindow")) {
            windowNote.kendoWindow({
                width: 600,
                maxHeight: 500,
                title: "Note",                
                close: function() {
                    
                }
            });
        }
    });
    
    function btnSearchClick()
    {
        grid.refresh();
    }
    
    function btnCreateClick()
    {
    	Monitor.create();
    }
    
    
    function showWindowNote(id){
        var window = windowNote.data("kendoWindow");                

        window.refresh({
            url: "/monitor/getNote",
            data: { id: id }
        });
        
        windowNote.data("kendoWindow").center();
        windowNote.data("kendoWindow").open();
        
        $("#windowNote").closest(".k-window").css({
            top: 50            
        });
        
         $("html, body").animate({ scrollTop: 0 }, "fast");

        return false;
    }
</script>

<div id="tabstrip">
	<ul>
		<li class="k-state-active">
			Search
		</li>
		<li>
			Create
		</li>
	</ul>
	<div id="frmSearch" class="form" style="width:700px;">
		<dl>         
		    <dt <label for="_domain">Domain: </label></dt>
		    <dd ><input type="text" class="k-textbox" id="_domain" /></dd>
		</dl>
	    <div style="text-align:center;">
	        <button class="k-button long" onclick="btnSearchClick();">Search</button>
	    </div>
	</div>   
	<div style="width:720px;">
            <input type="hidden" id="monitorID" />
        <dl>         
            <dt ><label for="domain">Domain: </label></dt>
            <dd ><input type="text" class="k-textbox" id="domain" /></dd>
            <dt><label for="alexaRank">Alexa Rank: </label></dt>
            <dd><input type="text" id="alexaRank" value="0"/></dd>
            <dt>Note: </dt>
            <dd>
                <textarea id="note" rows="10" cols="30" style="width:600px;height:300px"></textarea>
            </dd>                    
        </dl>
	    <div style=" clear:both; text-align:center;">
	        <button id="btnCreate" class="k-button long" onclick="btnCreateClick()">Create</button>
                <button id="btnUpdate" class="k-button long" onclick="Monitor.update();" style="display:none;">Update</button>                
	    </div>
	</div>     
</div>
<hr/>

<div id="grid"></div>
<div id="windowNote" style="display:none;"></div>